<template>
  <div class="container school-list">
    <div class="heander">
      <edu-category @patch="handleCategory" :list="categoryList"></edu-category>
    </div>
    <template v-if="$util.isDef(schoolList)">
      <edu-school-list
        v-if="schoolList.length > 0"
        @next="handleItemClick"
        :teacherList="schoolList"
        :level="false"
      ></edu-school-list>
      <edu-no-data v-else></edu-no-data>
    </template>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import EduCategory from '@/components/EduCategory'
import EduSchoolList from './components/schoolList'
export default {
  components: {
    EduNoData,
    EduPagination,
    EduSchoolList,
    EduCategory
  },
  data() {
    return {
      schoolList: null,
      categoryType: '',
      categoryList: []
    }
  },
  mounted() {
    this.handleInitList()
    this.getCategoryInfo()
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.categoryType = this.$route.query.category
        this.handleInitList()
      }
    }
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleInitList()
    },
    // 初始化列表
    handleInitList() {
      this.$api.getSchoolList(
        {
          category: this.categoryType,
          page: this.$store.getters['paginate/page'],
          count: 32
        },
        res => {
          let data = res.data
          this.schoolList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: data.total
          })
        }
      )
    },
    // 分类
    handleCategory(val) {
      this.$router.push({
        query: {
          category: val
        }
      })
    },
    // 获取分类数据
    getCategoryInfo() {
      this.$api.getCategory(
        {
          type: 2
        },
        res => {
          const data = res.data
          this.categoryList = data
        }
      )
    },
    handleItemClick(item) {
      window.open(`${item.sdn}?id=${item.id}`, '_blank')
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.school-list {
  margin-top: 10px;
  ::v-deep .teacher-list {
    margin-top: 15px;
  }
  .heander {
    padding: 24px 24px 0;
    background-color: #ffffff;
  }
}
</style>
